<template>
  <div class="bgc-white br4 wp100 p20">
    <div style="display: flex; flex-direction: row; justify-content: space-between">
      <div class="flex align-items-center" style="margin-bottom: 30px">
        <img src="@/assets/img/icon.png" alt="" class="width24px height24px" />
        <span class="font-3C3D43-16px ml8">快捷入口</span>
      </div>
      <a-dropdown placement="topRight">
        <div style="cursor: pointer">
          <span style="font-size: 16px; color: #a8a8a8">•</span>
          <span style="margin-left: 0px; font-size: 16px; color: #a8a8a8">•</span>
          <span style="margin-left: 0px; font-size: 16px; color: #a8a8a8">•</span>
        </div>
        <a-menu slot="overlay">
          <a-menu-item @click="showEdit()"> 快捷入口设置 </a-menu-item>
        </a-menu>
      </a-dropdown>
    </div>
    <div class="employ-wrap" style="margin-top: 0">
      <div class="tapButtonBox flex" style="margin-top: 0" v-for="list in entryList" :key="list.value">
        <div class="employ-right flex" style="justify-content: space-around; width: 100%; margin-top: 20px; margin-bottom: 20px">
          <div
            v-for="item in list"
            :key="item.value"
            ref="tapButton"
            class="tapButton pointer flex flex-col justify-content align-items-center"
            :style="{ 'flex-wrap': 'no-wrap', visibility: !getshow(item) ? 'hidden' : '' }"
            @click="getshow(item) ? goEntry(item.url) : null"
          >
            <div class="tap tapTitle">
              <img :src="item.img" style="width: 55px; height: 55px" />
            </div>

            <span class="tap tapSpan">{{ item.label }}</span>
          </div>
        </div>
      </div>
    </div>
    <a-modal title="快捷入口设置" :visible="quickEdit" @cancel="handleCancel" width="690px">
      <div slot="footer">
        <a-button @click="handleCancel"> 取消 </a-button>
        <a-button type="primary" @click="seveQuick">保存</a-button>
      </div>
      <div style="display: flex; flex-direction: column">
        <div style="display: flex; flex-direction: row; align-items: center; margin-bottom: 20px">
          <div style="color: #3c3d43; font-size: 14px; font-weight: 700">已选择模块</div>
          <div style="color: #a6a8b4; font-size: 12px; margin-left: 5px">可拖拽菜单调整显示顺序，最多6个</div>
        </div>

        <div class="overview-tag-wrapper" style="display: flex; width: 100%; flex-direction: row">
          <draggable v-model="tempEntryListNet[0]" filter=".forbid" animation="3000" @start="onStart" @end="onEnd" :move="onMove">
            <transition-group>
              <a-tag
                v-for="(item, index) in tempEntryListNet[0]"
                :key="item.value"
                v-show="item.label !== '操作'"
                :closable="false"
                :color="item.label !== '姓名' ? '#fff' : '#E8E8E8'"
                :class="item.label !== '姓名' ? 'overview-select-tag' : 'overview-select-tag-name'"
                style="padding-left: 20px; padding-right: 20px; padding-top: 10px; padding-bottom: 10px; cursor: move"
              >
                <div style="position: absolute; z-index: 10; margin-top: -10px" @click="deleteSelectedHead(index)">
                  <div
                    style="
                      line-height: 0.3;
                      height: 20px;
                      width: 20px;
                      margin-left: 50px;
                      padding-top: 6px;
                      padding-left: 6px;
                      color: #000;
                      font-size: 18px;
                      cursor: pointer;
                      border-radius: 50%;
                      color: #fff;
                      background-color: #00000055;
                    "
                  >
                    x
                  </div>
                </div>
                <div style="display: flex; flex-direction: column; align-items: center">
                  <img :src="item.img" style="width: 55px; height: 55px; margin-bottom: 8px" />
                  <div style="font-size: 14px; color: #55565d">{{ item.label }}</div>
                </div>
              </a-tag>
            </transition-group>
          </draggable>
        </div>

        <div style="color: #3c3d43; font-size: 14px; margin-bottom: 20px; font-weight: 700; margin-top: 20px">点击添加模块</div>
        <div style="width: 100%; display: flex; flex-direction: row; overflow-y: auto">
          <a-tag
            v-for="(item, index) in tempEntryListNet[1]"
            :key="item.value"
            :color="item.label !== '姓名' ? '#fff' : '#E8E8E8'"
            :class="item.label !== '姓名' ? 'overview-select-tag' : 'overview-select-tag-name'"
            @click="addSelectedHead(index)"
            style="padding-left: 20px; padding-right: 20px; padding-top: 10px; padding-bottom: 10px"
          >
            <div style="display: flex; flex-direction: column; align-items: center">
              <img :src="item.img" style="width: 55px; height: 55px; margin-bottom: 8px" />
              <div style="font-size: 14px; color: #55565d">{{ item.label }}</div>
            </div>
          </a-tag>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script>
import { getHead, updateHead } from "@/api/company/index";
import draggable from "vuedraggable";
import { mapGetters } from "vuex";
const contData = [
  {
    value: 1,
    label: "花名册",
    img: require("@/assets/indexImg/huamingce.png"),
    url: "/staff/employee",
    premission: "company:people:list"
  },
  {
    value: 2,
    label: "月工资表",
    img: require("@/assets/indexImg/yuegongzibiao.png"),
    url: "/wages/monthly",
    premission: "company:salary:salary"
  },
  {
    value: 4,
    label: "发起合同",
    img: require("@/assets/indexImg/hetong@2x.png"),
    url: "/contract/type",
    premission: "company:contract:publish"
  },
  {
    value: 5,
    label: "社保管理",
    img: require("@/assets/indexImg/shebao@2x.png"),
    url: "/shebao/shebaoManage",
    premission: "company:soc:intend"
  },
  {
    value: 7,
    label: "招聘管理",
    img: require("@/assets/indexImg/zhaopin@2x.png"),
    url: "/recruitment/management",
    premission: "recruitment"
  },
  {
    value: 8,
    label: "薪资代发",
    img: require("@/assets/indexImg/xinzi@2x.png"),
    url: "/paySalary/applyFor",
    premission: "transferAccount"
  },
  {
    value: 6,
    label: "考勤打卡",
    img: require("@/assets/indexImg/yuegongzibiao@2x.png"),
    url: "/check/checkTable",
    premission: "company:attendance:report"
  },
  {
    value: 9,
    label: "业务审批",
    img: require("@/assets/indexImg/shenpi@2x.png"),
    url: "/approval/list",
    premission: "company:appro:list"
  },
  {
    value: 10,
    label: "CRM",
    img: require("@/assets/indexImg/crm.png"),
    url: "/clientele/myClientele",
    premission: "clientele"
  },
  {
    value: 11,
    label: "个税",
    img: require("@/assets/indexImg/shui.png"),
    url: "/taxCalculate/management",
    premission: "company:geshui"
  },
  {
    value: 12,
    label: "商业保险",
    img: require("@/assets/indexImg/shangbao.png"),
    url: "/shangbao",
    premission: "insuranceAddService:insuranceAddService.zaibaorenyuan"
  },
  {
    value: 13,
    label: "待遇处理",
    img: require("@/assets/indexImg/dycl.png"),
    url: "/daiyuchuli",
    premission: "dycl:"
  }
];
export default {
  components: {
    draggable
  },
  data() {
    return {
      widHeight: 900,
      quickEdit: false,
      // 快捷入口数据
      entryList: [],
      drag: false,
      tempEntryListNet: [],
      entryListNet: []
    };
  },
  created() {
    this.widHeight = window.screen.height;
    this.getHead();
  },
  computed: {
    ...mapGetters(["permissions_menu", "permissions"])
  },
  methods: {
    seveQuick() {
      this.quickEdit = false;
      this.entryListNet = JSON.parse(JSON.stringify(this.tempEntryListNet));
      this.getEntryList();
      var see = [];
      for (var i = 0; i < this.entryListNet[0].length; i++) {
        see.push({
          fieldName: this.entryListNet[0][i].label,
          isEdit: false
        });
      }

      updateHead({
        id: "all",
        moduleCode: "shortcut",
        moduleType: "快捷入口",
        canSee: see,
        ignore: [] // 无用的字段
      }).then((res) => {
        this.$message.success("保存成功");
      });
    },
    showEdit() {
      this.quickEdit = true;
      this.tempEntryListNet = JSON.parse(JSON.stringify(this.entryListNet));
    },
    deleteSelectedHead(index) {
      const temp = JSON.parse(JSON.stringify(this.tempEntryListNet[0][index]));
      this.tempEntryListNet[0].splice(index, 1);
      this.tempEntryListNet[1].push(temp);
    },
    addSelectedHead(index) {
      if (this.tempEntryListNet[0].length >= 6) {
        this.$message.success("已选择模块，最多6个！");
        return;
      }
      const temp = JSON.parse(JSON.stringify(this.tempEntryListNet[1][index]));
      this.tempEntryListNet[1].splice(index, 1);
      this.tempEntryListNet[0].push(temp);
    },
    // 禁止拖动到id为1的对象
    onMove(e) {
      if (e.relatedContext.element.title === "姓名") return false;
      return true;
    },
    // 开始拖拽事件
    onStart() {
      this.drag = true;
    },
    // 拖拽结束事件
    onEnd() {
      this.drag = false;
    },
    // 根据返回权限显示快捷入口
    getEntryList() {
      this.entryList = this.entryListNet[0];
      this.entryList = this.group(this.entryList, 3);
      // 补充不足的数量
      if (this.entryList.length !== 0) {
        for (var i = this.entryList[this.entryList.length - 1].length; i < 3; i++) {
          const empty = JSON.parse(
            JSON.stringify(this.entryList[this.entryList.length - 1][this.entryList[this.entryList.length - 1].length - 1])
          );
          empty.hide = 1;
          empty.value = empty.value + 1;
          this.entryList[this.entryList.length - 1].push(empty);
        }
      }
    },
    group(array, subGroupLength) {
      let index = 0;
      const newArray = [];
      while (index < array.length) {
        newArray.push(array.slice(index, (index += subGroupLength)));
      }
      return newArray;
    },
    handleCancel() {
      this.quickEdit = false;
    },
    permissionsCheck(arry) {
      for (let i = arry.length - 1; i >= 0; i--) {
        if (JSON.stringify(this.permissions.permissionStringList).indexOf(arry[i].premission) === -1) {
          arry.splice(i, 1); // 从数组中删除没有权限的元素
        }
      }
    },
    getHead() {
      getHead({
        moduleCode: "shortcut"
      }).then((res) => {
        // 默认数据
        var selected = [contData[0], contData[1], contData[2], contData[3], contData[4], contData[5]];
        var noselect = [];
        if (res.data) {
          // 存储数据
          if (res.data.canSee) {
            selected = [];
            for (var i = 0; i < res.data.canSee.length; i++) {
              this.mapUIData(selected, res.data.canSee[i].fieldName);
            }
          }
        }
        this.permissionsCheck(selected);
        this.entryListNet.push(selected);
        // 将剩余的所有添加到未选择列表里面
        for (i = 0; i < contData.length; i++) {
          let isExist = false;
          for (var j = 0; j < selected.length; j++) {
            if (selected[j].label === contData[i].label) {
              isExist = true;
              break;
            }
          }
          if (!isExist) {
            noselect.push(contData[i]);
          }
        }
        this.permissionsCheck(noselect);
        this.entryListNet.push(noselect);

        this.getEntryList();
      });
    },
    mapUIData(arry, fieldName) {
      for (var i = 0; i < contData.length; i++) {
        if (contData[i].label === fieldName) {
          arry.push(contData[i]);
        }
      }
    },
    goEntry(val) {
      this.$emit("changeUrl", val);
    },
    getshow(item) {
      return item.hide === undefined;
    }
  }
};
</script>

<style lang="scss" scoped>
// .overview-select-tag-name {
//   cursor: pointer;
//   margin: 5px;
//   color: #666666;
// }
// .overview-select-tag {
//   background-color: #fff !important;
//   color: var(--primary) !important;
//   border: 1px solid var(--primary);
//   cursor: pointer;
//   margin: 5px;
// }
// .overview-no-select-tag {
//   background-color: #fff;
//   cursor: pointer;
//   margin: 5px;
// }
.overview-tag-wrapper {
  ::v-deep .ant-tag {
    .anticon-close {
      color: var(--primary);
    }
  }
}
.tapSpan {
  font-size: 14px;
  color: #55565d;
  padding-top: 0;
  margin-top: 10px;
}
.justify-content {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.justify-around {
  justify-content: space-around;
}

.align-items-center {
  align-items: center;
}
.width24px {
  width: 24px;
}
.w16px {
  width: 16px;
}
.width50px {
  width: 50px;
}
.h16px {
  height: 16px;
}
.height100 {
  height: 100%;
}
.height24px {
  height: 24px;
}
.height50px {
  height: 50px;
}
.h48px {
  height: 48px;
}
.mt5px {
  margin-top: 5px;
}
.mt15px {
  margin-top: 15px;
}
.font-3C3D43-16px {
  font-size: 16px;
  font-weight: 500;
  color: #3c3d43;
  line-height: 24px;
}
</style>
